<template>
  <div class="pay-password">
    <loading :show="loading" />
    <div class="notice">
      <p>这里可以修改支付密码, 请认真填写</p>
    </div>
    <div class="form">
      <p>
        <label>手机号码:</label>
        <span>
          <cube-input v-model.trim="postForm.mobile" />
        </span>
      </p>
      <p>
        <label>验证码:</label>
        <span>
          <cube-input v-model.trim="postForm.code" />
        </span>
        <span class="verify" @click="getVerify" :class="{'send': verifySend}">{{ verifyText }}</span>
      </p>
      <p>
        <label>新密码:</label>
        <span>
          <cube-input type="password" v-model.trim="postForm.password1" :eye="{open: false, reverse: false}" />
        </span>
      </p>
      <p>
        <label>重复密码:</label>
        <span>
          <cube-input type="password" v-model.trim="postForm.password2" :eye="{open: false, reverse: false}" />
        </span>
      </p>
      <p class="submit">
        <span @click="save">保存</span>
      </p>
    </div>
  </div>
</template>

<script>
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'

const text = '获取验证码'

export default {
  components: {
    Loading
  },
  data() {
    return {
      verifyText: text,
      verifySend: false,
      postForm: {
        mobile: '',
        code: '',
        password1: '',
        password2: '',
      },
      loading: false,
      disabled: false,
    }
  },
  methods: {
    _timer(timeout) {
      setTimeout(() => {
        timeout--
        this.verifyText = `${timeout}秒后重新发送`
        if (timeout !== 0) {
          this._timer(timeout)
        } else {
          this.verifyText = text
          this.verifySend = false
        }
      }, 1000)
    },
    // 获取验证码
    getVerify() {
      if (this.verifySend) {
        return false
      }
      if (!this.postForm.mobile) {
        this.$createToast({
          type: 'error',
          txt: '请输入手机号码'
        }).show()
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.postForm.mobile)) {
        this.$createToast({
          type: 'error',
          txt: '手机号码错误'
        }).show()
        return false
      }
      // request api
      api.User.getVerify({ ...this.postForm }).then(response => {
        let { data } = response
        data = base64.parse(data)
        const msg = (data.code && `验证码是:${data.code}`) || response.message
        const time = (data.code && 5000) || 2000
        this.verifySend = true
        this._timer(data.timeout * 60)
        this.$createToast({
          type: 'txt',
          time: time,
          txt: msg
        }).show()
      })
    },
    _check() {
      if (!this.postForm.password1 || !this.postForm.password2) {
        this.$createToast({
          type: 'error',
          txt: '请填写完整',
          time: 1000
        }).show()
        return false
      }
      if (this.postForm.password1 !== this.postForm.password2) {
        this.$createToast({
          type: 'error',
          txt: '两次输入密码不一致',
          time: 1000
        }).show()
        return false
      }
      if (this.postForm.password1.length < 6) {
        this.$createToast({
          type: 'error',
          txt: '密码长度不能小于6位',
          time: 1000
        }).show()
        return false
      }
      return true
    },
    save() {
      if (this._check()) {
        api.User.checkVerify({ ...this.postForm }).then(() => {
          this._reset()
        })
      }
    },
    _reset() {
      if (!this.disabled) {
        this.loading = true
        this.disabled = true
        api.Exec.resetPayPassword({ ...this.postForm }).then(() => {
          this.$createToast({
            type: 'correct',
            txt: '操作成功',
            time: 1000
          }).show()
          this.postForm = {}
          setTimeout(() => {
            this.$router.push('/center')
          }, 800)
        }).finally(() => {
          this.loading = false
          this.disabled = false
        })
      }
    }
  },
  created () {
  }
}
</script>

<style scoped lang="stylus">
.pay-password
  .notice
    background white
    padding 10px
    border-radius 10px
    font-size 14px
    p
      line-height 30px
  .form
    margin 10px 0
    padding 20px 10px
    background white
    border-radius 10px
    p
      display flex
      height 40px
      line-height 40px
      margin-bottom 10px
      label
        width 85px
        text-align right
        padding-right 10px
        font-weight 700
        font-size 14px
      span
        flex 1
        padding-right 15px
      &.submit
        display block
        height 33px
        line-height 33px
        span
          display inline-block
          background $main_color
          color white
          padding 0 50px
          border-radius 15px

.verify
  //width 80px
  //height 30px
  //line-height 30px
  background $main_color
  border-radius 5px
  color white
  //position absolute
  //top 20px
  //right 5px
  padding 0 10px
  &.send
    background $shallow
    color #333
</style>
